<template>
  <div class="p-2">
    <el-card v-if="list.length > 0" v-loading="loading" shadow="never">
      <el-row :gutter="20">
        <el-col v-for="(item, index) in list" :key="index" :span="24" style="padding: 10px">
          <el-card style="border-radius: 10px; background-color: #fbfbfb; position: relative">
            <view style="font-size: 12px; display: flex; justify-content: flex-start; align-items: center">
              <el-col :span="6" style="display: flex; justify-content: flex-start; align-items: center">
                <!-- <el-image style="width: 140px" :src="item.images" fit="contain" /> -->
                <el-image style="width: 140px" :src="item.imagesUrl" fit="fill" />
                <view style="display: block; margin-left: 20px">
                  <view class="block mb-14px">
                    <text class="font-600">园区名称：</text>
                    <text>{{ item.name }}</text>
                  </view>
                  <view class="block mb-14px">
                    <text class="font-600">管理单位：</text>
                    <text>{{ item.managementUnit }}</text>
                  </view>
                  <view class="block">
                    <text class="font-600">物业公司：</text>
                    <text>{{ item.propertyCompany }}</text>
                  </view>
                </view>
              </el-col>
              <el-col :span="4" style="display: flex; justify-content: flex-start; align-items: center">
                <img id="u17_img" style="width: 36px; height: 34px" class="img" src="@/assets/icons/svg/u17.svg" />
                <div id="u19_text" class="text ml-4">
                  <div style="color: #7f7f7f; font-weight: 800">占地面积</div>
                  <div style="font-size: 18px">
                    <span style="font-size: 26px; color: #d9001b; font-weight: bold">{{ item.area || '0.00' }}</span>
                    <span style="color: #7f7f7f; margin-left: 8px; font-weight: 900">亩</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="4" style="display: flex; justify-content: flex-start; align-items: center">
                <img id="u17_img" style="width: 36px; height: 34px" class="img" src="@/assets/images/u753.svg" />
                <div id="u19_text" class="text ml-4">
                  <div style="color: #7f7f7f; font-weight: 800">建筑面积</div>
                  <div style="font-size: 18px">
                    <span style="font-size: 26px; color: #d9001b; font-weight: bold">{{ item.floorArea || '0.00' }}</span>
                    <span style="color: #7f7f7f; margin-left: 8px; font-weight: 900">万㎡</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="4" style="display: flex; justify-content: flex-start; align-items: center">
                <img id="u17_img" style="width: 36px; height: 34px" class="img" src="@/assets/images/u742.png" />
                <div id="u19_text" class="text ml-4">
                  <div style="color: #7f7f7f; font-weight: 800">出租率</div>
                  <div style="font-size: 18px">
                    <span style="font-size: 26px; color: #d9001b; font-weight: bold">{{ item.lettingRate || 0 * 100 }}</span>
                    <span style="color: #7f7f7f; margin-left: 8px; font-weight: 900">%</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="5" style="display: flex; justify-content: flex-start; align-items: center">
                <img id="u17_img" style="width: 36px; height: 34px" class="img" src="@/assets/images/745.png" />
                <div id="u19_text" class="text ml-4">
                  <div style="color: #7f7f7f; font-weight: 800">当年累计租金收入</div>
                  <div style="font-size: 18px">
                    <span style="font-size: 26px; color: #d9001b; font-weight: bold">{{ item.accumulatedAmount || '0.00' }}</span>
                    <span style="color: #7f7f7f; margin-left: 8px; font-weight: 900">万元</span>
                  </div>
                </div>
              </el-col>
            </view>
            <view
              style="cursor: pointer; color: #f59a23; position: absolute; top: 10px; right: 10px; font-size: 14px; font-weight: bold"
              @click="handleOpenDialog('detail', item.id)"
              >详情</view
            >
          </el-card>
        </el-col>
      </el-row>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <el-empty v-else></el-empty>
    <FoundationInfo ref="foundationDialog" />
  </div>
</template>

<script setup name="Information" lang="ts">
import { listByIds } from '@/api/system/oss';
import FoundationInfo from './form.vue';
import { listFoundationInfo, overview } from '@/api/zichanguanli/foundationInfo';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { land_use } = toRefs<any>(proxy?.useDict('land_use'));
const list = ref([]);
const total = ref(10);
const loading = ref(false);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
});

const handleIdGetImg = async (ids: string) => {
  if (!ids) return '';
  const res = await listByIds(ids);
  return res.data[0].url;
};

const foundationDialog = ref();
const handleOpenDialog = (type: string, id?: any) => {
  foundationDialog.value.open(type, id);
};

/** 查询土地信息列表 */
const getList = async () => {
  loading.value = true;
  const res = await overview(queryParams.value);

  // 使用 Promise.all 等待所有异步操作完成
  const processedList = await Promise.all(
    res.rows.map(async (item) => {
      item.imagesUrl = await handleIdGetImg(item.images);
      return item; // 返回处理后的 item
    })
  );

  list.value = processedList; // 更新 list.value 为处理后的数据
  console.log(list.value);
  total.value = res.total;
  loading.value = false;
};

onMounted(() => {
  nextTick(() => {
    getList();
  });
});
</script>
